<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>


<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>测试管理</h2>
            <p>滑动条登录页</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form" lay-filter="LAY-user-login-form">

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                    for="LAY-user-login-username"></label>
                <input type="text" name="userName" id="LAY-user-login-username" lay-verify="required" placeholder="用户名"
                    class="layui-input">
            </div>

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                    for="LAY-user-login-password"></label>
                <input type="password" name="password" id="LAY-user-login-password" lay-verify="required"
                    placeholder="密码" class="layui-input">
            </div>

            <div class="layui-form-item">
                <div class="layui-row">
                    <div id="slider"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
            </div>

        </div>
    </div>

    <input type="text" id="sliderText" class="layui-input" style="display: none;">

    <div class="layui-trans layadmin-user-login-footer">

        <p>© 2020 <a href="https://me.csdn.net/weixin_41070914" target="_blank">我的CSDN博客</a></p>
    </div>

</div>

<script>
    layui.use(['sliderVerify', 'admin', 'form', 'user', 'layer'], function () {
        var $ = layui.$,
            setter = layui.setter,
            admin = layui.admin,
            form = layui.form,
            router = layui.router(),
            search = router.search,
            layer = layui.layer,
            sliderVerify = layui.sliderVerify;

        form.render();
        var ok = setter.response.statusCode.ok;
        var fail = setter.response.statusCode.fail;
        var lock = setter.response.statusCode.lock;

        var slider = sliderVerify.render({
            elem: '#slider',
            onOk: function () {
                admin.req({
                    type: "get",
                    url: "/mrc/rbac/token",
                    success: function (res) {
                        if (res.code == ok) {
                            $("#sliderText").val(res.data);
                            layer.msg("滑块验证通过", {
                                icon: 1
                            });
                        } else {
                            layer.msg("系统错误！请联系开发商！", {
                                icon: 1
                            });
                        }
                    }
                });

            }
        })

        form.on('submit(LAY-user-login-submit)', function (obj) {

            var load = layer.load(0, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });

            if (!slider.isOk()) {
                layer.close(load);
                layer.msg("请先通过滑块验证");
            }

            var token = $("#sliderText").val();

            admin.req({
                url: '/mrc/user/login/' + token,
                type: 'post',
                data: JSON.stringify(obj.field),
                dataType: 'json',
                contentType: "application/json",
                success: function (res) {
                    layer.close(load);
                    slider.reset();
                    form_reset();
                    if (res.code == ok) {
                        layui.data(setter.tableName, {
                            key: setter.request.tokenName,
                            value: res.data.access_token
                        });
                        layer.msg('登入成功', {
                            offset: '15px',
                            icon: 1,
                            time: 1000
                        }, function () {
                            location.hash = search.redirect ? decodeURIComponent(
                                search.redirect) : '/';
                        });
                    } else if (res.code == fail) {
                        layer.msg('登入失败,账户或密码不正确', {
                            offset: '15px',
                            icon: 2,
                            time: 2000
                        })
                    } else if (res.code == lock) {
                        layer.msg('账号被锁', {
                            offset: '15px',
                            icon: 2,
                            time: 2000
                        })
                    }
                },
                error: function (res) {
                    layer.close(load);
                    layer.msg("系统出错！", {
                        offset: '15px',
                        icon: 1,
                        time: 1000
                    })
                }
            });

        });

        function form_reset() {
            form.val("LAY-user-login-form", { 
                "userName": "",
                "password": ""
            });
        }


    });
</script>